/* eslint-disable react-hooks/rules-of-hooks */
/* eslint-disable @typescript-eslint/no-use-before-define */
// import dept from "@/services/api/organize/dept";
import OrgTree from "@/components/OrgTree";
import { getList } from "@/services/api/module/system/dept";
import { OrganizationGraph } from "@ant-design/graphs";
import { useEffect, useState } from "react";

const MyOrganizationGraph = () => {
	const [data, setData] = useState<any>(undefined);
	const getTree = (nodes: any) => {
		let temps: { id: any; value: { title: any }; children: any[] }[] = [];
		nodes.forEach((item: any) => {
			temps.push({
				id: String(item?.id),
				value: {
					title: item?.deptName
				},
				children: item?.children ? getTree(item?.children) : []
			});
		});
		return temps;
	};

	useEffect(() => {
		getList().then((res: any) => {
			setData({
				id: String(res.data[0]?.id),
				value: {
					title: res.data[0]?.deptName
				},
				children: getTree(res.data[0].children)
			});
		});
	}, []);

	if (!data) {
		return <div>Loading...</div>;
	}
	const data1 = {
		id: 0,
		label: "XXX股份有限公司",
		children: [
			{
				id: 1,
				label: "技术部",
				children: [
					{
						id: 4,
						label: "后端工程师"
					},
					{
						id: 5,
						label: "前端工程师"
					},
					{
						id: 6,
						label: "运维工程师"
					}
				]
			},
			{
				id: 2,
				label: "人事部"
			},
			{
				id: 3,
				label: "销售部"
			}
		]
	};

	return (
		<OrgTree
			labelClassName="org-tree-node-label-inner-blue"
			collapsable={true}
			data={data1}
			horizontal={false}
			expandAll={false}
			renderContent={data => {
				return data.label;
			}}
			onClick={(e, data) => {
				//todo
			}}
		/>
	);
	// return <OrganizationGraph data={data} height={800} behaviors={["drag-canvas", "zoom-canvas"]} />;
};

export default MyOrganizationGraph;
